<template>
  <div class="space-right">
    <!-- 图层筛选 -->
    <div class='layer-filter'>

      <h4>
        <span></span>
        <span>图层筛选</span>
        <img src="../../static/image/1/arrow_down.png"
             alt="">
      </h4>

    </div>

    <!-- 地下空间各区面积统计 -->
    <div class="space-statistics">
      <h4>
        <span></span>
        <span>{{placeName[num]}}地下空间面积统计</span>
        <div class='space-select'>
          <div class='space-item'
               @click='spaceSelect(1)'>{{placeName[a]}}</div>
          <div class='space-line'></div>
          <div class='space-item'
               @click='spaceSelect(2)'>{{placeName[b]}}</div>
        </div>

      </h4>
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="总面积"
                     name="first">

          <keep-alive>
            <EchartsTotalArea v-if='num===0'>
            </EchartsTotalArea>
            <Echarts-four v-else-if='num===1'></Echarts-four>
            <echarts-eleven v-else-if='num===2'></echarts-eleven>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="每平方公里面积"
                     name="second">
          <keep-alive>
            <echarts-total-area-per v-if='num===0'>
            </echarts-total-area-per>
            <echarts-four-per v-else-if='num===1'></echarts-four-per>
            <echarts-eleven-per v-else-if='num===2'></echarts-eleven-per>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 南京市各功能地下空间占比 -->
    <div class="space-rigth-bottom">
      <h4>
        <span></span>
        <span>功能地下空间统计</span>
        <div class='useToggle'
             @click='useToggle'>{{use}}</div>
      </h4>
      <EchartsSpaceRatio class="mySpaceRatio"></EchartsSpaceRatio>
    </div>
  </div>
</template>    

<script>
import Bus from "../utils/bus.js"
import EchartsSpaceRatio from '../echarts/EchartsSpaceRatio.vue';
import EchartsTotalArea from '../echarts/EchartsTotalArea.vue';
import EchartsTotalAreaPer from '../echarts/EchartsTotalAreaPer.vue';
import EchartsFour from '../echarts/EchartsFour.vue'
import EchartsFourPer from '../echarts/EchartsFourPer.vue'
import EchartsEleven from '../echarts/EchartsEleven.vue'
import EchartsElevenPer from '../echarts/EchartsElevenPer.vue'
import EchartsPerArea from '../echarts/EchartsPerArea.vue'
export default {
  components: {
    // 南京市各功能地下空间占比的echarts图
    EchartsSpaceRatio,
    // 地下空间各区面积统计的echarts图
    EchartsTotalArea,
    EchartsFour,
    EchartsEleven,
    EchartsPerArea,
    EchartsFourPer,
    EchartsElevenPer,
    EchartsTotalAreaPer
  },
  data () {
    return {
      // 地下空间各区面积统计Tab栏默认值
      activeName: "first",
      use: '打开功能详情',
      placeName: ['行政区', '四城', '十一片'],
      num: 0,
    };
  },
  mounted () {
    Bus.$on('closeUse', e => {
      console.log(e)
      if (!e) {
        this.use = '打开功能详情'
      }
    })
  },
  computed: {
    a: function () {
      let a1 = (this.num + 1) % 3
      return a1    },

    b: function () {
      let b1 = (this.num + 2) % 3
      return b1    }
  },
  methods: {
    spaceSelect (e) {
      this.num = (this.num + e) % 3
      // Bus.$emit('space-select', this.placeName[this.num])
    },
    useToggle () {
      if (this.use === '打开功能详情') {
        this.use = '关闭功能详情'

      } else if (this.use === '关闭功能详情') {
        this.use = '打开功能详情'

      }
      Bus.$emit('useToggle', this.use)
    },
    handleClick (tab, event) {
      Bus.$emit('echarts')
      console.log(tab, event);
    }
  }
};
</script>

<style lang='scss'>
$precent: 100vw / 1920;
.space-right {
  width: 443 * $precent;
  z-index: 10;
  h4 {
    text-align: left;
    font-size: 16 * $precent;
    font-family: "Arita";
    font-weight: 100;
    letter-spacing: 2 * $precent;
    height: 50 * $precent;
    line-height: 50 * $precent;
    display: flex;
    align-items: center;
    margin-left: 25 * $precent;
    > img {
      height: 40%;
      margin-left: 290 * $precent;
    }
    > span:nth-child(1) {
      width: 5 * $precent;
      height: 16 * $precent;
      background: #fff000;
    }
    span:nth-child(2) {
      margin-left: 10 * $precent;
    }
  }
  .useToggle {
    margin-left: 100 * $precent;
    height: 30 * $precent;
    width: 120 * $precent;
    line-height: 30 * $precent;
    color: #a0ff76;
    background-color: #24618e;
    border: 1px solid #11a99a;
    text-align: center;
    border-radius: 5px;
  }
  .useToggle:hover {
    background-image: linear-gradient(
      to right,
      rgba(26, 111, 148, 0.8),
      rgba(12, 63, 146, 0.8),
      rgba(30, 98, 103, 0.8)
    );
  }
  .space-right .space-statistics .el-tabs .el-tabs__item {
    border: none;
  }
  .el-tabs .el-tabs__item {
    color: #7ea2c4;
  }
  .layer-filter {
    position: relative;
    width: 436 * $precent;
    height: 50 * $precent;
    text-align: center;
    margin-top: 16 * $precent;
    margin-left: 13 * $precent;
    background-image: linear-gradient(
      to right,
      rgba(26, 111, 148, 0.8),
      rgba(12, 63, 146, 0.8),
      rgba(30, 98, 103, 0.8)
    );
    border-radius: 5 * $precent;
    box-shadow: 3 * $precent 3 * $precent 3 * $precent rgba(0, 0, 0, 0.3);
  }
  .space-statistics {
    margin-top: 8 * $precent;
    width: 100%;
    height: 520 * $precent;
    padding-top: 2 * $precent;
    padding-bottom: 20 * $precent;
    padding-right: 10 * $precent;
    padding-left: 10 * $precent;
    background: url("../../static/image/1/内容底图-4.png") no-repeat;
    background-size: 100% 100%;
    .space-select {
      position: absolute;
      right: 20 * $precent;
      display: flex;
      flex-direction: row;
      height: 30 * $precent;
      width: 120 * $precent;
      line-height: 30 * $precent;
      background-color: #24618e;
      border: 1px solid #11a99a;
      text-align: center;
      border-radius: 5px;
      .space-line {
        height: 30 * $precent;
        width: 2 * $precent;
        background-color: #11a99a;
      }
      .space-item {
        color: #a0ff76;
        width: 60 * $precent;
        height: 30 * $precent;
      }
      .space-item:hover {
        background-image: linear-gradient(
          to bottom,
          rgba(76, 127, 179, 1),
          rgba(13, 60, 113, 1)
        );
      }
    }
    .el-tabs {
      border: none;
      .space-right .space-statistics .el-tabs .el-tabs__item {
        border: none !important;
      }
      .is-active {
        color: #fff;
        background: url("../../static/image/1/内容4选中1.png") no-repeat;
        border-radius: 5 * $precent 0 0 5 * $precent;
        background-size: cover;
      }
      .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;
      }
      .el-tabs__nav-wrap::after {
        display: none;
      }
      .el-tabs__active-bar {
        display: none;
      }
      .el-tabs__nav {
        background-image: linear-gradient(
          to bottom,
          rgba(76, 127, 179, 1),
          rgba(13, 60, 113, 1)
        );
        border-radius: 5 * $precent;
        #tab-first {
          font-size: 15 * $precent;
        }
        #tab-second {
          font-size: 15 * $precent;
          border-radius: 0 5 * $precent 5 * $precent 0;
        }
      }

      .el-tabs__item {
        width: 150 * $precent;
        padding: 0;
      }
    }
    .totalArea {
      width: 436 * $precent;
      height: 400 * $precent;
    }
    .totalArea-per {
      width: 436 * $precent;
      height: 400 * $precent;
    }
    .eleven-area {
      width: 436 * $precent;
      height: 400 * $precent;
    }
    .four-city {
      width: 436 * $precent;
      height: 400 * $precent;
    }
    .four-city-per {
      width: 436 * $precent;
      height: 400 * $precent;
    }
    .per-area {
      width: 436 * $precent;
      height: 400 * $precent;
    }
    .eleven-area-per {
      width: 436 * $precent;
      height: 400 * $precent;
    }
  }

  .space-rigth-bottom {
    margin-top: -10 * $precent;
    position: relative;
    width: 460 * $precent;
    height: 392 * $precent;
    background: url("../../static/image/1/内容底图-5.png") no-repeat;
    background-size: 100% 100%;
    padding-left: 14 * $precent;
    padding-top: 14 * $precent;
    box-sizing: border-box;

    .spaceRatio {
      position: absolute;
      // width: 472*$precent;
      width: 432 * $precent;
      height: 307 * $precent;
      top: 65 * $precent;
    }
  }
}

.current {
  background-color: #3366ff;
  color: #fff;
}
</style>